<script setup>
import {ref} from "vue";

import {Search} from '@element-plus/icons-vue'
import {onMounted} from 'vue'
import {ElMessage} from 'element-plus'

onMounted(() => {
  reloadCode();
})
import {getCode, UserLogin} from '@/util/user.js'

const reloadCode = async () => {
  const res = await getCode();
  url.value = res.data.data.codeURL;
  loginData.value.uuid = res.data.data.uuid;
}

const loginData = ref({
  username: '',
  password: '',
  code: '',
  uuid: ''
})
// const url = ref"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");
// const url = ref('')
const url = ref('')


import router from '@/router/index.js'

const RegisterData = ref({
  username: '',
  password: ''
})
//在代码中使用 pinia的步骤
import {userTokenStore} from '@/stores/token.js'

const tokenstore = userTokenStore();
const login = async () => {
  const res = await UserLogin(loginData.value)
  if (res.data.code == 200) {
    //把得到的token存储到pinia中去  下次请求的时候放在请求头中 将token携带过去
    tokenstore.setToken(res.data.data);
    console.log(tokenstore.token)
    ElMessage.success('登录成功')
    router.push('/container')
  } else {
    ElMessage.error(res.data.msg)
  }
}
const idRegister = ref(false);
</script>

<template>

  <el-form :inline="false" v-if="idRegister==false">
    <el-form-item label="用户名:">
      <el-input
          v-model="loginData.username"
          style="width: 240px"
          placeholder="Please input"
          clearable
      />
    </el-form-item>
    <el-form-item label="密码:">
      <el-input
          v-model="loginData.password"
          style="width: 240px"
          type="password"
          placeholder="Please input password"
          show-password
      />
    </el-form-item>

    <el-form-item label="验证码:">
      <el-input
          v-model="loginData.code"
          style="width: 120px"
          placeholder="输入验证码"
          :suffix-icon="Search"
      />
      <el-image :src="url" style="width: 120px;height: 40px"/>

    </el-form-item>
    <el-button type="success" @click="login()">登录</el-button>
    <el-button type="primary" @click="idRegister=true">去注册</el-button>
  </el-form>

  <el-form v-else="idRegister">
    <el-form-item label="用户名:">
      <el-input
          v-model="RegisterData.username"
          style="width: 240px"
          placeholder="Please input"
          clearable
      />
    </el-form-item>
    <el-form-item label="密码:">
      <el-input
          v-model="RegisterData.username"
          style="width: 240px"
          placeholder="Please input"
          clearable
      />
    </el-form-item>
    <el-form-item label="确认密码:">
      <el-input
          v-model="RegisterData.username"
          style="width: 240px"
          placeholder="Please input"
          clearable
      />
    </el-form-item>
    <el-button @click="idRegister=false" type="primary">注册</el-button>
    <el-button @click="idRegister=false" type="primary">去登录</el-button>
  </el-form>

  <!--  <el-button type="success" @click="()=>{router.push('/container')}">Login</el-button>-->

  <!--  登录之后将用户的所有信息都存到pinia中去 -->
</template>

<style scoped>

</style>
